<template>
    <div>
        <el-card class="!border-none" shadow="never">
			<el-page-header :content="$route.meta.title" @back="$router.back()" />
		</el-card>
        <el-tabs class="align-middle" v-model="defaultTab">
            <el-tab-pane label="基础信息" name="product_info">
                <el-card class="mt-4 !border-none" shadow="never">
                    <div class="font-medium mb-7">基础信息</div>
                    <el-row type="flex">
                        <el-col class="flex" :span="8">
                            <div class="title">报告ID：</div>
                            <div>{{ info.id }}</div> 
                        </el-col>
                        <el-col class="flex" :span="8">
                            <div class="title">创建时间：</div>
                            <div class="">{{ info.generate_time || '-' }}</div>
                        </el-col>
                        <el-col class="flex" :span="8">
                            <div class="title">创建人：</div>
                            <div class="">{{ info.account }}</div> 
                        </el-col>
                        <el-col class="flex" :span="8">
                            <div class="title">查询价（元）：</div>
                            <div >{{ info.query_price }}</div>
                        </el-col>
                        <el-col class="flex" :span="8">
                            <div class="title">成本价（元）：</div>
                            <div >{{ info.cost_price }}</div>
                        </el-col>
                        <el-col class="flex" :span="8">
                            <div class="title">状态：</div>
                            <div v-if="info.status == 1">待生成</div>
                            <div v-if="info.status == 2">生成中</div>
                            <div v-if="info.status == 3">已生成</div>
                        </el-col>
                        <el-col class="flex" :span="8">
                            <div class="title">查询来源：</div>
                            <div v-if="info.query_source == 1">通过推广</div>
                            <div v-if="info.query_source == 2">自主查询</div>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="mt-4 !border-none" shadow="never">
                    <div class="font-medium mb-7">查询信息</div>
                    <el-row type="flex">
                        <el-col class="flex" :span="8">
                            <div class="title">企业名称：</div>
                            <div>{{ info.company_name }}</div> 
                        </el-col>
                        <el-col class="flex" :span="8">
                            <div class="title">统一社会信用代码：</div>
                            <div>{{ info.unified_social_credit_code }}</div> 
                        </el-col>
                        <el-col class="flex" :span="8">
                            <div class="title">法人姓名：</div>
                            <div>{{ info.legal_representative_name }}</div> 
                        </el-col>
                        <el-col class="flex" :span="8">
                            <div class="title">法人身份证号：</div>
                            <div>{{ info.legal_representative_identity_no }}</div> 
                        </el-col>
                        <el-col class="flex" :span="8">
                            <div class="title">法人手机号：</div>
                            <div>{{ info.legal_representative_phone }}</div> 
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="mt-4 !border-none" shadow="never">
                    <div class="font-medium mb-7">收益信息</div>
                    <div class="w-[800px]">
                        <el-table size="large" :data="info.income_detail_list">
                            <el-table-column label="序号" type="index" min-width="100" />
                            <el-table-column label="收益类型" min-width="120" prop="type">
                                <template #default="{row}">
                                    <span v-if="row.type == 1">直接收益</span>
                                    <span v-if="row.type == 2">间接收益-1</span>
                                    <span v-if="row.type == 3">间接收益-2</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="收益人" min-width="120" prop="account"/>
                            <el-table-column label="收益金额（元）" min-width="120" prop="amount"/>
                            <el-table-column label="备注" min-width="120" prop="remark"/>
                        </el-table>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="报告详情" name="baogao_info">
                <div class="w-[200px]">
                    <iframe class="iframe-conetnt" v-if="info.sn && info.status == 3" :src="`${baseUrl}report/#/detail?sn=${info.sn}`" frameborder="0" scrolling="no"></iframe>
                </div>
                <div v-if="info.status != 3">报告生成中.......</div>
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>
<script lang="ts" setup name="qiyelist">
import { reportDetail } from '@/api/qiye'
const route = useRoute();
const defaultTab = ref('product_info')
const baseUrl = `${import.meta.env.VITE_URL_LINK || ''}`
const info:any = ref({})
const getDetails = async () => {
    const data = await reportDetail({
        id: route.query.id
    })
    console.log(data)
    info.value = data
}

route.query.id && getDetails()

</script>
<style scoped lang="scss">
.flex{
    display: flex;
    height: 40px;
}
.title{
    color: #ccc;
}
.iframe-conetnt{
    width: 800px;
    height: 700px;
}
</style>